<template>
  <div>
    <!-- 顶部 -->
    <div class="top">
      <div class="top_content" style="background-color: #4cc860">
	   <span class="top_logo">
					<img src="../../assets/img/logonews.png" style="width: 240px;height: 90px"/>
				</span>

        <div class="searchcontainer">
          <input type="text" placeholder="搜索新闻（请输入关键字）" v-model="query" class="search">
          <button class="btnsearch" @click="queryNews()">搜索</button>
        </div>

        <div class="user" >
           <router-link to="/userlogin" v-if="userToken==null">
            <button type="submit" class="login">登录</button>
           </router-link>
          <router-link to="/userCenter" v-else>
            <span >
              <img :src="servePath+imgUrl" class="login" style="top: 10px;width: 70px;height: 70px;border-radius: 50%;border: coral dashed 2px" >
            </span>
           </router-link>
        </div>

          <button type="submit" class="crateNews" @click="isLogin()">发布作品➕</button>


      </div>
    </div>
    <!-- 内容区 -->
    <div id="main_box">
      <div class="left">
        <div class="left-col">
          <div class="nav">
            <ul class="sf-menu sf-arrows">
              <li>
                <a href="" class="active" @click="getNews()">最新推荐</a>
                <ul class="sub-menu"></ul>
              </li>
              <li> <a href="javaScript:void(0)" class="sf-with-ul" v-for="newstype in newsTypes" :key="newstype.id" @click="findNewsByid(newstype.id)">
                {{newstype.name}}
              </a></li>
            </ul>
          </div>
        </div>
      </div>
      <!--中间区域-->
      <div class="middle">

        <!--文章容器  文章列表开始-->
        <div class="recent-content">
          <h2><span >最新发布</span></h2>

          <div class="lista" v-for="news in newsList" :key="news.id">
            <h3>
              <router-link :to="{path:'/newsDetail',query:{id:news.id}}">
                {{news.name}}
              </router-link>
            </h3>
            <div class="pov">
              <div class="sview">
                <div class="sviewl">
                  <div class="tittop">
                    <b>发布于 {{news.publishTime}}</b>
                    &nbsp;
                    &nbsp;
                    <b>作者： {{news.writer}}</b>
                  </div>
                  <div class="art_summary">
                    <router-link :to="{path:'/newsDetail',query:{id:news.id}}">
                      <p>{{news.outline}}</p>
                    </router-link>
                  </div>
                  <div class="footbar">
                    <i class="footbar-category" v-for="type in news.newsTypeList" :key="type.id"><a href="javaScript:void(0)" >{{type.name}}</a></i>
                    <i class="footbar-like"><a href="javascript:;">阅读(908)</a></i>
                  </div>
                </div>
                <!--封面图-->
                <div class="sviewr">
                  <router-link :to="{path:'/newsDetail',query:{id:news.id}}">
                    <img :src= "servePath +news.picture" width="100" height="100">
                  </router-link>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="clear: left;"></div>
      <!-- 底部友情链接,网站信息 -->
      <div class="main_bottom">
        <div class="main_bottom_link">
          <div class="main_bottom_link_title">友情链接</div>
          <div class="main_bottom_link_content">
            <a :href="link.url" v-for="(link,index) in links" :key="index">
              <div style="display: inline-block;text-align: center">
                <img :src= "servePath +link.picture" width="100" height="100">
                <br/>
                {{link.name}}
              </div>


            </a>
          </div>
        </div>
        <div class="main_bottom_info">
          © 2021 {{form.title}} 京公网安备 {{form.noteid}}号<br/>
          联系电话：{{form.phone}}<br/>
          公司名称：{{form.name}}  &nbsp;&nbsp;&nbsp;
          <router-link to="/login">管理员登录</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      servePath:'http://127.0.0.1:8088/',
      tableData: [],
      newsTypes:[],
      links:[],
      newsList:[],
      query:'',
      form:{/*系统信息*/
        logo:"",
        name:'',
        title:"",
        phone:'',
        address:"",
        noteid:''
      },
      userToken:'',
      imgUrl:'',
      userName:''
    }
  },
  methods: {
    isLogin(){
      this.$router.push("/createNews")
    },
//新闻类型
    newsType(){
      this.$http.get("index/indexCtl/newsType").then((resp) => {
        if (resp.data.code==200){
          this.newsTypes = resp.data.data;
        }
      })
    },
//连接
    getLink(){
      this.$http.get("index/indexCtl/link").then((resp) => {
        if (resp.data.code==200){
          this.links = resp.data.data;
        }
      })
    },
//前20条新闻
    getNews(){
      this.$http.get("index/indexCtl/getNews").then((resp) => {
        if (resp.data.code==200){
          this.newsList = resp.data.data;
        }
      })
    },
//查询相似新闻
    queryNews(){
      this.$http.get("index/indexCtl/queryNews?name="+this.query).then((resp) => {
        if (resp.data.code==200){
          this.newsList = resp.data.data;
        }
      })
    },
//网页信息
    getSystem(){
      this.$http.get("index/indexCtl/System").then((resp) => {
        if (resp.data.code==200){
          this.form = resp.data.data;
        }
      })
    },
    //新闻类型信息
    findNewsByid(typeid){
      this.$http.get("index/indexCtl/findNewsByid?id="+typeid).then((resp) => {
        if (resp.data.code==200){
          this.newsList = resp.data.data;
        }
      })
    },
  },mounted() {
            this.newsType();
             this.getLink();
             this.getSystem();
              this.getNews();
              // this.findNewsByid();
    this.userToken=sessionStorage.getItem('userToken');
    this.imgUrl=sessionStorage.getItem('imgUrl');
    this.userName=sessionStorage.getItem('name');
    //新闻页的搜索功能
    if(this.$route.query.query!=undefined){
      this.query=this.$route.query.query;
      setTimeout(this.queryNews,80);
    }


  }
}
</script>

<style src="../../assets/css/index.css" scoped>

</style>